<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="在线查看报告">
				<view slot="center" class="navTitle">
					在线查看报告
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="viewComplete">
						<view class="tp">
							<view class="i">
								<text>完成日期</text>
								<text style="padding-left: 10rpx;">{{info.completeDate}}</text>
							</view>
							<view class="gp">
								<image src="@/static/images/tabgap.png" mode="scaleToFill"></image>
							</view>
							<view class="i">
								<text>答题时长</text>
								<text style="padding-left: 10rpx;">{{info.time | timeFormate('mm:ss')}}</text>
							</view>
						</view>
						<view class="content">
							<view class="tit">
								{{info.title}}
							</view>
							<view class="desc" v-html="info.desc"></view>
							<view class="btns">
								<view class="btn" @tap="viewReport(info.id)">
									查看报告
								</view>
							</view>
						</view>
					</view>
					<view class="testList s2" v-if="info.list&&info.list.length>0">
						<view class="item" v-for="i in info.list">
							<view class="img">
								<image :src="i.image" mode="aspectFill"></image>
							</view>
							<view class="txt">
								<view class="it">
									{{i.title}}
								</view>
								<view class="ip">
									{{i.desc}}
								</view>
								<view class="btns">
									<view class="btn">
										测评完成
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow:function(){
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(page.options['id']){
				this.$data.testId = page.options['id'];
			}
		},
		data() {
			return {
				testId:'101',
				info:''
			}
		},
		watch:{
			testId:function(){
				this.getInfo();
			}
		},
		methods: {
			viewReport(id){
				var that=this;
				uni.navigateTo({
					url:'/subpage/teacher/report/report?id='+id
				});
				
			},
			getInfo(){
				var that=this;
				if(!that.testId){return};
				var res={
					id:101,
					pid:101,
					title:'2024新生开学心理测评',
					desc:`下面的测试主要用于了解你的心情和感受，得分高低与学习成绩无关，答案也没有好坏之分，请按照你的实际情况如实回答。					<br><br>					所有的题目都是单选题，每一道题都按照你的第一反应作答即可，当遇到难以决定的问题时，请选择与你最接近的选项。					<br><br>					为了能够真实地了解你的状态，请一定要真实的作答哟！`,
					time:1834,
					completeDate:'2024-12-21',
					list:[
						{
							id:101,
							title:'中小学生心理健康量表',
							image:'../../../static/upload/test1.jpg',
							desc:'测试心理 了解自己',
							isComplete:false
						},
						{
							id:102,
							title:'艾森克人格问卷',
							image:'../../../static/upload/test2.jpg',
							desc:'测试心理 了解自己',
							isComplete:false
						},
						{
							id:103,
							title:'知觉压力(PSS)',
							image:'../../../static/upload/test3.jpg',
							desc:'测试心理 了解自己',
							isComplete:false
						}
					]
				};
				that.info=res;
			}
		},
		mounted(){
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.testList{
		&.s2{
			.item{
				padding: 20rpx;
				&:nth-child(3n+1){
					background: linear-gradient(90deg,#fff,#e3eefa);
				}
				&:nth-child(3n+2){
					background: linear-gradient(90deg,#fff,#ffecde);
				}
				&:nth-child(3n+3){
					background: linear-gradient(90deg,#fff,#def1ed);
				}
				&:last-child{
					margin-bottom: 0;
				}
				.img{
					width: 160rpx;
					height: 160rpx;
				}
				.it{
					color: #4d5765;
				}
				.ip{
					color: #7a7e89;
				}
				.btns{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-top: 30rpx;
					.btn{
						width: 140rpx;
						font-size: 24rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						text-align: center;
						color: #fe9c29;
						background: #fff;
					}
				}
			}
		}
	}
	.pb50{
		padding-bottom: 50rpx;
	}
	.viewComplete{
		border-radius: 30rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		background: #fff;
		.tp{
			background: #ffebd4;
			display: flex;
			align-items:stretch;
			justify-content: space-between;
			color: #fe9c29;
			.i{
				flex: 0 0 auto;
				padding: 0 20rpx;
				line-height: 60rpx;
				font-size: 24rpx;
			}
			.gp{
				flex: 1 1 auto;
				image{
					display:block;
					height: 60rpx;
					width: 100%;
				}
			}
		}
		.content{
			padding: 30rpx;
			.tit{
				padding: 30rpx 0;
				text-align: center;
				font-size: 48rpx;
				font-weight: bold;
				color: #65554d;
			}
			.desc{
				color: #897f7a;
				font-size: 28rpx;
				line-height: 1.3;
			}
		}
		.btns{
			margin-top: 50rpx;
			.btn{
				text-align: center;
				line-height: 90rpx;
				height: 90rpx;
				outline: none !important;
				background: #fe9c29;
				color: #fff;
				border: none;
				border-radius: 90rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				&:before,&:after{
					display: none;
				}
				&.gray{
					background: #e1ebf8;
					color: #4d5765;
				}
			}
		}
	}
</style>
